<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>后台管理系统</title>
  <!-- 引入 Bootstrap 5 CSS -->
  <link href="./boost/bootstrap.min.css" rel="stylesheet">
  <!-- 引入 Font Awesome 图标 -->
  <link rel="stylesheet" href="./boost/font-awesome.min.css">
  <style>
    /* 基础样式 */
    body {
      font-family: 'Segoe UI', sans-serif;
      overflow-x: hidden;
    }

    /* 侧边栏样式 */
    .sidebar {
      min-height: 100vh;
      width: 250px;
      background-color: #2c3e50;
      color: white;
      transition: all 0.3s ease;
    }

    .sidebar.collapsed {
      width: 80px;
    }

    .sidebar .nav-link {
      color: rgba(255, 255, 255, 0.8);
      padding: 1rem 1.5rem;
      transition: all 0.2s;
    }

    .sidebar .nav-link:hover, .sidebar .nav-link.active {
      background-color: #34495e;
      color: white;
    }

    .sidebar .nav-link i {
      margin-right: 10px;
      width: 20px;
      text-align: center;
    }

    .sidebar.collapsed .nav-text {
      display: none;
    }

    .sidebar.collapsed .nav-link {
      padding: 1rem;
      text-align: center;
    }

    .sidebar.collapsed .nav-link i {
      margin-right: 0;
      font-size: 1.2rem;
    }

    /* 主内容区样式 */
    .main-content {
      flex: 1;
      transition: all 0.3s ease;
    }

    .sidebar.collapsed ~ .main-content {
      margin-left: 80px;
    }

    /* 顶部导航样式 */
    .top-nav {
      background-color: white;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      z-index: 100;
    }

    /* 数据卡片样式 */
    .stat-card {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    /* 上传按钮样式 */
    .upload-btn-wrapper {
      position: relative;
      overflow: hidden;
      display: inline-block;
    }

    .upload-btn-wrapper input[type=file] {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div class="d-flex">
  <!-- 侧边栏 -->
  <div class="sidebar" id="sidebar">
    <div class="p-4 border-bottom d-flex align-items-center justify-content-between">
      <h3 class="nav-text mb-0">管理系统</h3>
      <button class="btn text-white" id="toggleSidebar">
        <i class="fa fa-bars"></i>
      </button>
    </div>
    <ul class="nav flex-column mt-3">
      <li class="nav-item">
        <a class="nav-link active" href="#dashboard">
          <i class="fa fa-dashboard"></i>
          <span class="nav-text">仪表盘</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#users">
          <i class="fa fa-users"></i>
          <span class="nav-text">用户管理</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#products">
          <i class="fa fa-shopping-bag"></i>
          <span class="nav-text">产品管理</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#orders">
          <i class="fa fa-file-text-o"></i>
          <span class="nav-text">订单管理</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#settings">
          <i class="fa fa-cog"></i>
          <span class="nav-text">系统设置</span>
        </a>
      </li>
    </ul>
  </div>

  <!-- 主内容区 -->
  <div class="main-content ms-0 ms-md-250">
    <!-- 顶部导航 -->
    <nav class="top-nav py-3 px-4 d-flex justify-content-between align-items-center">
      <div class="d-flex align-items-center">
        <button class="btn me-3 d-md-none" id="mobileToggle">
          <i class="fa fa-bars"></i>
        </button>
        <h5 class="mb-0">仪表盘</h5>
      </div>
      <div class="d-flex align-items-center">
        <div class="me-3 position-relative">
          <i class="fa fa-bell-o text-secondary"></i>
          <span class="position-absolute top-0 right-0 w-2 h-2 bg-danger rounded-circle"></span>
        </div>
        <div class="d-flex align-items-center">
          <img src="https://picsum.photos/id/1005/40/40" class="rounded-circle me-2" width="40" height="40"
               alt="用户头像">
          <span class="d-none d-md-inline">管理员</span>
        </div>
      </div>
    </nav>

    <!-- 页面内容 -->
    <div class="p-4">
      <!-- 数据统计卡片 -->
      <div class="row mb-4">
        <div class="col-md-3 mb-3">
          <div class="stat-card bg-primary text-white p-4 rounded-3">
            <div class="d-flex justify-content-between">
              <div>
                <p class="mb-1">总用户</p>
                <h3 class="mb-0">2,541</h3>
              </div>
              <i class="fa fa-users fa-2x"></i>
            </div>
            <div class="mt-2 text-sm">
              <span class="text-success"><i class="fa fa-arrow-up"></i> 5.2%</span> 较上月
            </div>
          </div>
        </div>
        <div class="col-md-3 mb-3">
          <div class="stat-card bg-success text-white p-4 rounded-3">
            <div class="d-flex justify-content-between">
              <div>
                <p class="mb-1">总订单</p>
                <h3 class="mb-0">1,892</h3>
              </div>
              <i class="fa fa-file-text-o fa-2x"></i>
            </div>
            <div class="mt-2 text-sm">
              <span class="text-white"><i class="fa fa-arrow-up"></i> 12.8%</span> 较上月
            </div>
          </div>
        </div>
        <div class="col-md-3 mb-3">
          <div class="stat-card bg-warning text-white p-4 rounded-3">
            <div class="d-flex justify-content-between">
              <div>
                <p class="mb-1">总收入</p>
                <h3 class="mb-0">¥35,621</h3>
              </div>
              <i class="fa fa-money fa-2x"></i>
            </div>
            <div class="mt-2 text-sm">
              <span class="text-white"><i class="fa fa-arrow-up"></i> 8.5%</span> 较上月
            </div>
          </div>
        </div>
        <div class="col-md-3 mb-3">
          <div class="stat-card bg-info text-white p-4 rounded-3">
            <div class="d-flex justify-content-between">
              <div>
                <p class="mb-1">转化率</p>
                <h3 class="mb-0">12.5%</h3>
              </div>
              <i class="fa fa-exchange fa-2x"></i>
            </div>
            <div class="mt-2 text-sm">
              <span class="text-danger"><i class="fa fa-arrow-down"></i> 1.2%</span> 较上月
            </div>
          </div>
        </div>
      </div>

      <!-- 上传区域和表格 -->
      <div class="row">
        <!-- 左侧上传区域 -->
        <div class="col-md-4 mb-4">
          <div class="card p-4 h-100">
            <h5 class="card-title mb-4">文件上传</h5>

            <!-- 单文件上传 -->
            <div class="mb-4">
              <label class="form-label">上传用户头像</label>
              <div class="upload-btn-wrapper">
                <button class="btn btn-outline-primary w-100">
                  <i class="fa fa-upload me-2"></i>选择图片
                </button>
                <input type="file" accept="image/*" id="avatarUpload"/>
              </div>
              <div class="mt-3" id="avatarPreview" style="display: none;">
                <img src="" alt="预览图" class="img-thumbnail" width="100%">
              </div>
            </div>

            <!-- 多文件上传 -->
            <div class="mb-4">
              <label class="form-label">批量上传产品图片</label>
              <div class="upload-btn-wrapper">
                <button class="btn btn-outline-secondary w-100">
                  <i class="fa fa-files-o me-2"></i>选择多个文件
                </button>
                <input type="file" accept="image/*" multiple id="productUpload"/>
              </div>
              <div class="mt-3" id="fileList"></div>
            </div>

            <!-- 上传按钮 -->
            <button class="btn btn-success w-100" id="submitUpload">
              <i class="fa fa-check me-2"></i>确认上传
            </button>
          </div>
        </div>

        <!-- 右侧数据表格 -->
        <div class="col-md-8">
          <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
              <h5 class="mb-0">最近订单</h5>
              <button class="btn btn-sm btn-outline-primary">
                <i class="fa fa-download me-1"></i>导出数据
              </button>
            </div>
            <div class="card-body">
              <div class="table-responsive">
                <table class="table table-hover">
                  <thead>
                  <tr>
                    <th>订单编号</th>
                    <th>用户</th>
                    <th>金额</th>
                    <th>状态</th>
                    <th>操作</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td>ORD-2023-001</td>
                    <td>张三</td>
                    <td>¥299.00</td>
                    <td><span class="badge bg-success">已完成</span></td>
                    <td>
                      <button class="btn btn-sm btn-outline-info"><i class="fa fa-eye"></i>
                      </button>
                      <button class="btn btn-sm btn-outline-danger"><i class="fa fa-trash"></i>
                      </button>
                    </td>
                  </tr>
                  <tr>
                    <td>ORD-2023-002</td>
                    <td>李四</td>
                    <td>¥599.00</td>
                    <td><span class="badge bg-warning">处理中</span></td>
                    <td>
                      <button class="btn btn-sm btn-outline-info"><i class="fa fa-eye"></i>
                      </button>
                      <button class="btn btn-sm btn-outline-danger"><i class="fa fa-trash"></i>
                      </button>
                    </td>
                  </tr>
                  <tr>
                    <td>ORD-2023-003</td>
                    <td>王五</td>
                    <td>¥1299.00</td>
                    <td><span class="badge bg-danger">已取消</span></td>
                    <td>
                      <button class="btn btn-sm btn-outline-info"><i class="fa fa-eye"></i>
                      </button>
                      <button class="btn btn-sm btn-outline-danger"><i class="fa fa-trash"></i>
                      </button>
                    </td>
                  </tr>
                  <tr>
                    <td>ORD-2023-004</td>
                    <td>赵六</td>
                    <td>¥89.00</td>
                    <td><span class="badge bg-primary">已付款</span></td>
                    <td>
                      <button class="btn btn-sm btn-outline-info"><i class="fa fa-eye"></i>
                      </button>
                      <button class="btn btn-sm btn-outline-danger"><i class="fa fa-trash"></i>
                      </button>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>

              <!-- 分页 -->
              <nav class="mt-3">
                <ul class="pagination justify-content-center">
                  <li class="page-item disabled">
                    <a class="page-link" href="#" tabindex="-1">上一页</a>
                  </li>
                  <li class="page-item active"><a class="page-link" href="#">1</a></li>
                  <li class="page-item"><a class="page-link" href="#">2</a></li>
                  <li class="page-item"><a class="page-link" href="#">3</a></li>
                  <li class="page-item">
                    <a class="page-link" href="#">下一页</a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 引入 Bootstrap 5 JS 和 Popper -->
<script src="./boost/bootstrap.bundle.min.js"></script>
<script>
  // 侧边栏切换功能
  document.getElementById('toggleSidebar').addEventListener('click', function () {
    const sidebar = document.getElementById('sidebar');
    sidebar.classList.toggle('collapsed');
  });

  // 移动端侧边栏切换
  document.getElementById('mobileToggle').addEventListener('click', function () {
    const sidebar = document.getElementById('sidebar');
    sidebar.classList.toggle('collapsed');
  });

  // 头像上传预览
  document.getElementById('avatarUpload').addEventListener('change', function (e) {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = function (event) {
        const preview = document.getElementById('avatarPreview');
        preview.querySelector('img').src = event.target.result;
        preview.style.display = 'block';
      };
      reader.readAsDataURL(file);
    }
  });

  // 多文件上传列表展示
  document.getElementById('productUpload').addEventListener('change', function (e) {
    const files = e.target.files;
    const fileList = document.getElementById('fileList');
    fileList.innerHTML = ''; // 清空现有列表

    if (files.length > 0) {
      const list = document.createElement('ul');
      list.className = 'list-group';
      for (let i = 0; i < files.length; i++) {
        const item = document.createElement('li');
        item.className = 'list-group-item d-flex justify-content-between align-items-center';
        item.innerHTML = `
            <span><i class="fa fa-file-image-o me-2"></i>${files[i].name}</span>
            <span class="badge bg-secondary">${(files[i].size / 1024).toFixed(1)}KB</span>
          `;
        list.appendChild(item);
      }
      fileList.appendChild(list);
    }
  });

  // 上传按钮点击事件
  document.getElementById('submitUpload').addEventListener('click', function () {
    // 模拟上传成功提示
    const toast = new bootstrap.Toast(document.createElement('div'));
    toast._element.className = 'toast text-white bg-success position-fixed bottom-4 right-4';
    toast._element.innerHTML = `
        <div class="d-flex">
          <div class="toast-body">文件上传成功！</div>
          <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
      `;
    document.body.appendChild(toast._element);
    toast.show();
  });
</script>
</body>
</html>